<!-- 需求信息面板 -->
<template>
  <JYWPanel
    :key="'needInfo'"
    title="需求信息"
    :height="$attrs.height"
    :show-expand="$attrs.expand"
    p-k="needInfo"
    :expand="expand"
    :disabled="pancelDisabledOptions['needInfo']"
  >
    <el-form
      ref="formData"
      label-width="130px"
      size="mini"
      label-position="right"
      :model="formData"
      :rules="rules"
      :disabled="pancelDisabledOptions['needInfo']"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="需求类型" prop="itemType">
            <DicSelect v-model="formData.itemType" disabled dic-key="itemType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急程度" prop="level">
            <DicSelect v-model="formData.level" placeholder="请选择紧急程度" dic-key="itemLevel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="提出人" prop="sponsor">
          <el-input v-model="formData.sponsor" />
        </el-form-item>
      </el-row>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="提出科室" prop="organizer">
        <CascaderDepartment v-model="formData.organizer" />
      </el-form-item>
      <el-form-item label="提出日期" prop="startTime">
        <el-date-picker
          v-model="formData.startTime"
          type="date"
          placeholder="选择日期"
          class="w-100"
          :editable="false"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="期望完成日期">
        <el-date-picker
          v-model="formData.endTime"
          :disabled="!formData.startTime "
          type="date"
          placeholder="选择日期"
          class="w-100"
          :editable="false"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptionsControlEndTime"
        />
      </el-form-item>

      <el-form-item label="涉及系统" prop="aboutSystem">
        <DicSelect v-model="formData.aboutSystem" placeholder="请选择涉及系统" multiple :default-value="false" dic-key="aboutSystem" />
      </el-form-item>
      <el-form-item label="需求标题" prop="title">
        <el-input v-model="formData.title" placeholder="请填写需求标题" />
      </el-form-item>
      <el-form-item label="需求描述">
        <el-input
          v-model="formData.remark"
          placeholder="请填写需求描述"
          type="textarea"
          rows="5"
          maxlength="255"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="附件">
        <JYWUpload v-model="formData.enclosure" />
      </el-form-item>
    </el-form>
  </JYWPanel>
</template>

<script>
import _ from 'lodash';
import { arrayToString, stringToArray, } from '@/utils/common';
import moment from 'moment';
import { mixins_base, mixins_needInfo, mixins_rules, } from '@/minxins/project';
import ProjectAPI from '@/apis/project';
import DicSelect from '../select/selectDic';

export default {
  name: 'NeedInfo',
  components: {
    DicSelect,
  },
  mixins: [mixins_base, mixins_rules, mixins_needInfo],
  data() {
    return {
      formData: {
        id: null,
        itemType: '',
        organizer: null,
        sponsor: '',
        phone: '',
        aboutSystem: [],
        level: '',
        startTime: '',
        title: '',
        endTime: '',
        remark: '',
        enclosure: JSON.stringify([]),
      },
    };
  },
  computed: {
    pickerOptionsControlEndTime() {
      return {
        disabledDate: (time) => {
          const strat = moment(this.formData.startTime).subtract(1, 'days');

          return moment(time.getTime()) <= strat;
        },
      };
    },
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      if (this.itemCode) {
        const rs = this.getterPanelGroupData.demand;
        this.formData = _.pick(rs, Object.keys(this.formData));
        this.formData.aboutSystem = stringToArray(this.formData.aboutSystem);
      } else {
        // this.formData.itemType = Number(this.dictionary['itemType'][0]?.value) || '';
        // this.formData.level = Number(this.dictionary['itemLevel'][0]?.value) || '';
        this.formData.startTime = new Date();
      }
    },
    submit(v) {
      const data = _.cloneDeep(this.formData);
      data.aboutSystem = arrayToString(data.aboutSystem);
      data.startTime = moment(data.startTime).format('yyyy-MM-DD');
      data.endTime = data.endTime
        ? moment(data.endTime).format('yyyy-MM-DD')
        : '';

      return new Promise((r, j) => {
        this.$refs['formData'].validate(async (valid) => {
          if (valid) {
            try {
              const rs = await ProjectAPI.demand.createOrSaveNeedInfo(data, v);
              this.$message['success'](v === 'confirm' ? '提交成功' : '保存成功' + '!');
              r(rs);
            } catch (e) {
              j(e);
            }
          } else {
            j('表单校验未通过');
          }
        });
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.w-100 {
  width: 100%;
}
</style>
